import { createElement, LinkHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { stepDefaultProps } from './defaultProps';
import type { StepOptions } from './type';
import StepGroup from './StepGroup';
import StepTitle from './StepTitle';
import StepDescription from './StepDescription';
import StepContent from './StepContent';

export interface StepProps extends StepOptions, LinkHTMLAttributes<HTMLLinkElement> {}

interface StepInterface extends FC<StepProps> {
  Group: typeof StepGroup;
  Content: typeof StepContent;
  Title: typeof StepTitle;
  Description: typeof StepDescription;
}

const Step: StepInterface = (props) => {
  const { className, active, completed, link, children, forwardedRef, ...stepProps } = props;

  return createElement(
    link ? 'a' : 'div',
    { ref: forwardedRef, className: classNames({ active, completed }, 'step', className), ...stepProps },
    children,
  );
};

Step.displayName = 'Step';
Step.defaultProps = stepDefaultProps;

Step.Group = StepGroup;
Step.Content = StepContent;
Step.Title = StepTitle;
Step.Description = StepDescription;

export default Step;
